<template>
  <div>
    <new-search-bar :searchFixed="true" bgSearch="c-bg-white c-pt24-i" @search="startSearch" @cancel="startSearch"></new-search-bar>
    <div class="c-ph24">
      <div @click="clickColumnItem(item.columnId)" v-for="(item,index) in columnList" :key="index" class="c-flex-row c-pv24 c-bd-b1">
        <div class="c-ww180 c-hh120 c-text-hidden c-p c-br10">
          <CoverImg :coverSizeClass="'c-w100 c-h c-text-hidden' + ((themeName == 'mb3' || themeName == 'mb4' ) ? 'c-br16' : '')" :imgClass="(themeName == 'mb3' || themeName == 'mb4' ) ? 'c-br16' : ''" :coverUrl="$addXossFilter(item.cover, require('@/assets/defult270.png'))" />
          <vip-status :item="item"></vip-status>
          <div class="c-pa c-p-b8 c-p-r8 c-br8 c-fs18 c-fc-white c-ph5 c-hh28 c-flex-row c-flex-center theme-bg" v-if="item.isUpdating == 1 && enableColumnRelates == 1">更新中</div>
        </div>
        <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
          <div class="c-fs24 c-text-ellipsis2">{{item.name}}</div>
          <div class="c-flex-row c-justify-sb c-aligni-center">
            <div class="c-flex-row c-aligni-center c-flexw-wrap c-lh26">
              <span class="c-fc-xmlred c-fw600">
                <span v-if="item.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                <span :class="checkCnPrice(item.payType, item.price, 9) ? 'c-fs22' : 'c-fs26'">{{item.payType | priceValueFilter(item.price, 9, item.optimal, 'index')}}</span>
              </span>
              <span v-if="isShowcrossedPrice(item)" class="c-lh18 c-fs18 c-fc-gray c-text-decoration-through c-ml10">￥{{getCrossedPrice(item)}}</span>
            </div>
            <div v-if="item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom)))" class="c-fc-gray c-fs20 c-flex-shrink0">{{item.saleCount | formatNumber}}{{ !$isWxAppIos() ? '人购买' : '人观看' }}</div>
            <div v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom))" class="c-fc-gray c-fs20 c-flex-shrink0">{{item.clicks | formatNumber}}次观看</div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (columnList && columnList.length > 0)" :noData="!columnList || columnList.length == 0" :noDataText="'暂无专栏'"></loading-status-tem>
    <div v-if="companyAuth != null && companyAuth.companyNav != null">
      <nav-bottom-bar v-if="item.navType == 7" :itemIndex="7" v-for="(item,index) in companyAuth.companyNav" :key="index"></nav-bottom-bar>
    </div>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue'
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js";
export default {
  name: "ColumnList",
  components: {
    loadingStatusTem,
    NavBottomBar,
    newSearchBar,
    vipStatus,
    CoverImg
  },
  props: [],
  beforeCreate() { },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5',
      is_page: false,
      page: 1,
      limit: 10,
      searchText: "",
      columnList: [],
      isLoading: false,
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
      cfg: JSON.parse(localStorage.getItem("cfg")),
      ckFrom: global.ckFrom.column,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {
    // 判断显示划线价格
    isShowcrossedPrice() {
      return function(item) {
        return !this.$isWxAppIos() && item.crossedPrice && Number(item.crossedPrice) > 0;
      }
    },
    // 获取划线价格
    getCrossedPrice() {
      return function(item) {
        return item.crossedPrice;
      }
    }
  },
  watch: {},
  methods: {
    checkCnPrice(payType, price, prodType) {
      return utilJs.checkCnPrice(payType, price, prodType)
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickColumnItem(columnNo) {
      let toPath = `/homePage/column/columnDetail?cId=-1&ckFrom=${global.ckFrom.column}&extId=${columnNo}`;
      this.iosAppRouteChange(toPath);
    },
    //通过专栏名称模糊搜索专栏
    startSearch(e) {
      this.page = 1;
      this.courseList = [];
      utilJs.toPageScrollTop();
      this.searchText = e.searchValue;
      this.getMore();
    },
    //分页获取专栏
    getMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(
          global.apiurl +
          "column?searchName=" +
          this.searchText +
          "&page=" +
          this.page +
          "&limit=" + this.limit,
          function (res) {
            $this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
            if ($this.page == 1) {
              $this.columnList = res.data;
            } else {
              let list = res.data;
              $this.columnList = $this.columnList.concat(list);
            }
            $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? $this.page + 1 : $this.page;
            $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page ? true : false;

            $this.isLoading = false;
          }
        );
      }
    },
    //分享
    wechatShare: function () {
      let title = "专栏列表";//window.localStorage.getItem("shareTitle");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "专栏列表";
      var shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue(title, "", shareUrl, "");
    },
    //下滑获取更多专栏
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    },
    initData() {
      this.page = 1;
      this.searchText = "";
      this.is_page = false;
      this.columnList = [];
      this.getMore();
    },
  },
  activated() {
    setDocumentTitle("专栏");// eslint-disable-line
    this.isLoading = false;
    if (utilJs.checkNeedInitData(this.columnList, this.page)) {
      this.initData()
    }
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.is_page = false;
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .c-tag-br12 {
    border-radius: 0.3rem 0 0.3rem 0;
  }
</style>
